import echarts from "echarts/lib/echarts";

// 关联数据类别
export const BrowseCategoriesOptions = (params) => ({
  // radar: {
  //   center: ['50%', '50%'],
  //   radius: '70%',
  //   name: {
  //     // formatter: function (name) {
  //     //   let arr;
  //     //   arr = ['{a|' + name + '}'];
  //     //   return arr.join('\n');
  //     // },
  //     textStyle: {
  //       rich: {
  //         //根据文字的组设置格式
  //         a: {
  //           color: '#BCDCFF',
  //           fontSize: 14,
  //           fontWeight: 600,
  //           fontFamily: 'Source Han Sans CN',
  //         },
  //       },
  //     },
  //   },
  //   // 名字和图形的距离
  //   nameGap: 5,
  //   indicator: params.indicator,
  //   splitLine: {
  //     show: false,
  //   },
  //   axisLine: {
  //     show: false,
  //   },
  //   splitArea: {
  //     areaStyle: {
  //       color: [
  //         'rgba(84,136,255, 0.05)',
  //         'rgba(84,136,255, 0.1)',
  //         'rgba(84,136,255, 0.2)',
  //         'rgba(84,136,255, 0.3)',
  //         'rgba(84,136,255, 0.4)',
  //         'rgba(84,136,255, 0.5)',
  //       ].reverse(),
  //       shadowColor: 'rgba(0, 0, 0, .5)',
  //       shadowBlur: 5,
  //       shadowOffsetX: 10,
  //       shadowOffsetY: 10,
  //     },
  //   },
  // },
  // series: [
  //   {
  //     name: '目标任务',
  //     type: 'radar',
  //     data: [params.data],
  //     label: {
  //       show: false,
  //       formatter: function (params) {
  //         return params.value + '万';
  //       },
  //       color: '#9ae8ac',
  //       distance: 10,
  //       align: 'right',
  //     },
  //     symbol: 'none',
  //     symbolSize: [6, 6],
  //     // 边缘颜色
  //     lineStyle: {
  //       color: 'rgba(160,159,246, 0.6)',
  //       width: 2,
  //     },
  //     areaStyle: {
  //       color: 'rgba(114,113,233,.4)',
  //       opacity: 0.8,
  //       shadowColor: 'rgba(115,149,255,1)',
  //       shadowBlur: 10,
  //     },
  //   },
  // ],
  // tooltip:{},
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    top: "4%",
    right: "4%",
    bottom: "3%",
  },
  xAxis: [
    {
      type: "category",
      data: params.pieData.map((d) => d.name),
      axisTick: {
        alignWithLabel: true,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      show: false,
    },
  ],
  series: [
    {
      name: "目标值",
      type: "bar",
      barWidth: "60%",
      label: {
        show: true,
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'inside',
        // distance: 15,
        formatter: '{b}  {c}'
      },
      itemStyle: {
        color: function (params) {
          var colors = [
            "#5d54b2",
            "#61b4dd",
            "#1677ff",
            "#aee4bb",
            "#cf1322",
            "#ffd666",
            "#fa8c16",
            "#ad6800",
            "#bae637",
            "#69b1ff",
            "#13c2c2",
            "#597ef7",
            "#9e1068",
            "#614700",
            "#531dab",
            "#254000",
          ];
          return colors[params.dataIndex];
        },
      },
      data: params.pieData.map((d) => d.value),
    },
  ],
});

// 反馈
export const FeedbackOptions = (params) => ({
  title: {
    text: `${params.number}%`,
    left: "45%",
    top: "40%",
    textAlign: "center",
    textStyle: {
      fontSize: "16",
      fontWeight: "500",
      color: "#909dff",
      textAlign: "center",
    },
  },
  series: [
    {
      type: "pie",
      startAngle: 0,
      radius: ["80%", "70%"],
      center: ["50%", "50%"],
      data: [
        {
          value: params.number,
          name: params.title,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#5a8bfa",
                },
                {
                  offset: 1,
                  color: "#831bdb",
                },
              ]),
              shadowColor: "rgba(175,143,230,.5)",
              shadowBlur: 10,
            },
          },
          label: {
            show: false,
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0,
              },
            },
          },
          hoverAnimation: false,
        },
        {
          label: {
            show: false,
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0,
              },
            },
          },
          value: params.number < 100 ? 100 - params.number : 0,
          hoverAnimation: true,
          itemStyle: {
            color: "rgba(79,76,192, 0.3)",
          },
        },
      ],
    },
  ],
});

//  线下门店流量
export const OfflinePortalOptions = (params) => ({
  color: ["#73A0FA", "#73DEB3", "#32C5E9", "#67E0E3"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999",
      },
      lineStyle: {
        type: "dashed",
      },
    },
  },
  grid: {
    left: "15",
    right: "15",
    bottom: "0",
    top: "30",
    containLabel: true,
  },
  legend: {
    data: ["一建", "三箭", "四建", "安装"],
    show: true,
    textStyle: {
      color: "#BCDCFF",
    },
  },
  xAxis: [
    {
      type: "category",
      data: params.xData,
      axisLabel: {
        color: "#BCDCF0",
        textStyle: {
          fontSize: 12,
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        show: false,
      },
      boundaryGap: true,
    },
    {
      type: "category",
      axisLabel: {
        color: "#BCDCF0",
        textStyle: {
          fontSize: 12,
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        show: false,
      },
      boundaryGap: true,
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "总计(亿元)",
      // max: 35,
      nameTextStyle: {
        color: "#BCDCFF",
      },
      axisLabel: {
        color: "#BCDCF0",
        textStyle: {
          fontSize: 12,
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#252938",
        },
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        show: true,
      },
    },
    // {
    //   type: 'value',
    //   min: 0,
    //   max: 100,
    //   interval: 50,
    //   name: '实际完成',
    //   //网格样式
    //   splitLine: {
    //     show: false,
    //   },
    //   axisLine: {
    //     lineStyle: {
    //       color: '#94b5ca',
    //     },
    //   },
    // },
  ],
  series: [
    // {
    //   name: '一建',
    //   type: 'line',
    //   data: params.data1,
    // },
    // {
    //   name: '三箭',
    //   type: 'line',
    //   data: params.data2,
    // },
    // {
    //   name: '四建',
    //   type: 'line',
    //   data: params.data3,
    // },
    // {
    //   name: '安装',
    //   type: 'line',
    //   data: params.data4,
    // },
    {
      name: "实际完成",
      type: "bar",
      data: params.barData,
      label: {
        show: true,
        formatter: "{c}",
        position: "top",
        color: "#fff",
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(34,224,214,.8)",
            },
            {
              offset: 0.5,
              color: "rgba(5,137,186,1)",
            },
            {
              offset: 1,
              color: "rgba(11,12,31,1)",
            },
          ]),
          barBorderRadius: 7.5,
        },
      },
      barMaxWidth: 15,
    },
  ],
});
